<template>
    <div class="ma-content-block lg:flex justify-between p-4">
      <!-- CRUD 组件 -->
      <ma-crud :options="options" :columns="columns" ref="crudRef">
      </ma-crud>
    </div>
  </template>
  <script setup>
  import { ref, reactive } from 'vue'
  import car from '@/api/warehouse/car'
  import { Message } from '@arco-design/web-vue'
  import tool from '@/utils/tool'
  import * as common from '@/utils/common'
  
  const crudRef = ref()
  
  const options = reactive({
    id: 'car',
    pageLayout: 'fixed',
    rowSelection: {
      showCheckedAll: true
    },
    tabs:{
        dataIndex: "status",
    },
    pk: 'id',
    operationColumn: true,
    operationColumnWidth: 160,
    formOption: {
      viewType: 'drawer',
      width: "80%",
      layout:[
      {
        formType: 'grid-tailwind',
        colNumber: 1,
        cols:[
          {
            formList:[
              {dataIndex: "from"},
              {dataIndex: "to"},
              {dataIndex: "date"},
              {dataIndex: "supplier_service_id"},
              {dataIndex: "billto"},
              {dataIndex: "number"},
            ]
          },
        ]
      }
    ]
    },
    api: car.getList,
    recycleApi: car.getRecycleList,
    add: {
      show: true,
      api: car.save,
      auth: ['warehouse:car:save']
    },
    edit: {
      show: true,
      api: car.update,
      auth: ['warehouse:car:update']
    },
    delete: {
      show: true,
      api: car.deletes,
      auth: ['warehouse:car:delete'],
      realApi: car.realDeletes,
      realAuth: ['warehouse:car:realDeletes']
    },
    recovery: {
      show: true,
      api: car.recoverys,
      auth: ['warehouse:car:recovery']
    }
  })
  
  const columns = reactive([
    {
      title: "主键",
      dataIndex: "id",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      commonRules: {
        required: true,
        message: "请输入主键"
      }
    },
    {
      title: "车牌号",
      dataIndex: "number",
      formType: "input",
      search: true,
      commonRules: {
        required: true,
        message: "请输入编号"
      }
    },
    {
      title: "出发地",
      dataIndex: "from",
      formType: "input",
      search: true,
      commonRules: {
        required: true,
        message: "请输入出发地"
      }
    },
    {
      title: "目的地",
      dataIndex: "to",
      formType: "input",
      search: true,
      commonRules: {
        required: true,
        message: "请输入目的地"
      }
    },
    {
      title: "发车日期",
      dataIndex: "date",
      formType: "date",
      search: true,
      commonRules: {
        required: true,
        message: "请输入发车日期"
      },
      showTime: true
    },
    {
      title: "状态",
      dataIndex: "status",
      formType: "select",
      addDisplay:false,
      search: true,
      dict: {
        name: "carStatus",
        props: {
            label: "title",
            value: "key"
        },
        translation: true
      }
    },
    {
      title: "发车货站",
      dataIndex: "depot_id",
      formType: "select",
      addDisplay:false,
      editDisplay:false,
      search: true,
      dict: {
        url: 'warehouse/depot/list',
        props: {label: 'name', value: 'id'},
        translation: true,
        params: {
            select: 'id,name',
            delivery:true,
        }
      },
      commonRules: {
        required: true,
        message: "请输入发车货站"
      }
    },
    {
      title: "承运商服务",
      dataIndex: "supplier_service_id",
      formType: "select",
      virtualListProps:{},
      dict: {
          url: 'logistics/supplier/list',
          props: {
              label: 'name',
              value: 'id'
          },
          translation: true
        },
      search: true,
      commonRules: {
        required: true,
        message: "请输入承运商服务"
      }
    },
    {
      title: "收货方",
      dataIndex: "billto",
      formType: "input",
      search: true,
      commonRules: {
        required: true,
        message: "请输入收货方"
      }
    },
    {
      title: "创建者",
      dataIndex: "created_by",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true
    },
    {
      title: "更新者",
      dataIndex: "updated_by",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true
    },
    {
      title: "创建时间",
      dataIndex: "created_at",
      formType: "date",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      showTime: true
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      formType: "date",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      showTime: true
    },
    {
      title: "删除时间",
      dataIndex: "deleted_at",
      formType: "date",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      showTime: true
    },
    {
      title: "备注",
      dataIndex: "remark",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true
    }
  ])
  
  defineExpose({crudRef })
  </script>
  <script> export default { name: 'warehouse:car' } </script>